<template>
  <el-card style="margin-top: 15px">
    <div class="title">公告</div>
    <div class="contentItem">
      <ul class="noticeList">
        <li>
          <div class="item">
            <img src="@/assets/common/img.jpeg" alt="">
            <div>
              <p><span class="col">朱继柳</span> 发布了 第1期“传智大讲堂”互动讨论获奖名单公布</p>
              <p>2018-07-21 15:21:38</p>
            </div>
          </div>
        </li>
        <li>
          <div class="item">
            <img src="@/assets/common/img.jpeg" alt="">
            <div>
              <p><span class="col">朱继柳</span> 发布了 第2期“传智大讲堂”互动讨论获奖名单公布</p>
              <p>2018-07-21 15:21:38</p>
            </div>
          </div>
        </li>
        <li>
          <div class="item">
            <img src="@/assets/common/img.jpeg" alt="">
            <div>
              <p><span class="col">朱继柳</span> 发布了 第3期“传智大讲堂”互动讨论获奖名单公布</p>
              <p>2018-07-21 15:21:38</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'WorkNotice'
}
</script>

<style scoped lang="scss">
.title{
  font-size: 16px;
    padding: 20px;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
}
.noticeList {
  margin: 0;
  padding: 0;
  list-style: none;
}
.contentItem {
    padding: 0 30px;
    min-height: 350px;
    .item {
      display: flex;
      padding:18px 0 10px;
      border-bottom: solid 1px #ccc;
      font-size: 16px;
      .col {
        color: #8a97f8;
      }
      img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        margin-right: 10px;
      }
      p{
        padding: 0 0 8px;
      }
    }
  }

</style>
